<template>
  <div class="container">
    <!-- <div class="submitButtom">
      <el-button
        type="primary"
        style="margin-left: 10%; width: 80%"
        @click="goBack"
        >确 定</el-button
      >
    </div> -->

    <div class="TimeDiv">
      <el-date-picker
        style="margin-left: 6%; margin-right: 2%; width: 42%"
        v-model="form.date"
        type="date"
        placeholder="全部"
        value-format="yyyy-MM-dd"
        @change="getMeetingRecord"
        clearable
        :editable="false"
      >
      </el-date-picker>

      <el-select
        style="margin-left: 2%; margin-right: 6%; width: 42%"
        v-model="valueMeetingRoom"
        placeholder="请选择"
        @change="getMeetingRecord"
      >
        <el-option
          v-for="item in MeetingRoomList"
          :key="item.ID"
          :label="item.会议室名称"
          :value="item.ID"
          
        >
        </el-option>
      </el-select>
    </div>
    <div class="TimeDiv" style="text-align: center">
      <el-button type="primary" style="width: 86%" @click="getMeetingRecord"
        >查 询</el-button
      >
    </div>
    <el-row style="padding: 0px 15px 200px">
      <el-col :span="24" v-for="(item, index) in listData" :key="index">
        <el-card
          :body-style="{ padding: '0px' }"
          style="margin: 10px"
          @click.native="selectRecord(item)"
        >
          <!-- <img
            src="https://img.yaokaihui.com/86195160/366d530d3faa59cf77d8e498fea8faf5.jpg"
            class="image"
          /> -->
          <div>
            <!-- <el-alert :title="item.预订状态" :type="item.type" :closable="false">
            </el-alert> -->
            <span style="padding: 5px 20px; font-size: 18px !important">{{
              item.会议室名称
            }}</span>
            <p style="padding: 15px 20px 5px; font-size: 15px !important">
              {{ '预定人员：' + item.预订人员 }}
            </p>
            <p style="padding: 5px 20px 12px; font-size: 15px !important">
              {{
              '预定时间：' + item.开始时间 + ' 至 ' + item.结束时间 }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatDate } from '@/assets/js/date.js'
export default {
  data () {
    return {
      form: {
        date: '',
        startTime: '',
        endTime: '',
      },
      ClientName: '天津港一公司办公楼',
      startTimeList: [],
      endTimeList: [],
      timeTagList: [],
      MeetingRoomList: [{"会议室名称":"全部","ID":"0"}],
      valueMeetingRoom: '0',
      listData: null,
    }
  },
  mounted () {
    if ('ClientName' in this.$route.query) {
      this.ClientName = this.$route.query.ClientName;
    }
    this.getMeetingRoomList();
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.getMeetingRecord()
    })
  },
  methods: {
    async getMeetingRecord () {
      var url = "ConferenceRoom/GetMeetingRecord?ID=" + this.valueMeetingRoom + '&Date=' + this.form.date
      // var url = 'ConferenceRoom/GetMeetingOrderInfoOfManage?Date=&Type=0&ClientName=天津港一公司办公楼'
      const { data } = await this.$Http.get(url)
      this.listData = data
    },
    async getMeetingRoomList () {
      // var url = "ConferenceRoom/GetMeetingRoomList?ClientName=天津港一公司办公楼"
      var url = "ConferenceRoom/GetMeetingRoomList?ClientName=" + this.ClientName
      const { data } = await this.$Http.get(url)
      this.MeetingRoomList = data
      this.MeetingRoomList.unshift({"会议室名称":"全部","ID":"0"})
    },
    selectRecord (item) {
      this.$route.params.ID = item.ORDER_ID;
      this.$route.params.date = item.预订日期;
      // var meetingRoom = this.MeetingRoomList.filter(item => item.ID === this.valueMeetingRoom)
      this.$route.params.meetingName = item.会议室名称;
      this.$router.push({ path: '/ScheduleCRDetail' })
    },
  }
}
</script>

<style lang="scss" scoped>
.submitButtom {
  position: fixed;
  bottom: 0.2rem;
  width: 100%;
  height: 1.5rem;
}
.TimeDiv {
  font-size: 25px;
  height: 1.5rem;
  padding-top: 0.5rem;
  width: 100%;
}
.DateDiv {
  margin-left: 5%;
  width: 90%;
  overflow: auto;
  height: 0rem;
}
/* 隐藏滚动条 */
.DateDiv::-webkit-scrollbar {
  display: none;
}
</style>
